Buttons in a group are surrounded by a parent with the .slds-button-group class, unless they are in a list (in which case they use .slds-button-group-list. If the last button is an icon, like the down triangle, use the .slds-button--icon-border-filled class when accompanying a .slds-button--neutral group.
If the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the .slds-button--last class to the wrapper element to create proper spacing and borders.
Unless you are using the list version, include the Aria role role="group" so that assistive technologies are alerted to the grouping.
Overview of CSS Classes
The CSS class being referred to.
A description of what the class does.
Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
The selector that the class name is allowed to be used on.
The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Creates button group container
These selectors must remain in long hand in order to zero out borders that
we don't want on last-child or :only-child wrapped buttons
.slds-button-group div, .slds-button-group-list div